<template>
  <div class="online">
    <myNav :twoMenu="true"/>

    <div class="online_container">
        <div class="cell">
            <div><van-icon name="user-circle-o" />姓名</div>
            <div><input type="text" placeholder="请输您的姓名" v-model="name" /></div>
        </div>
        <div class="cell">
            <div><van-icon name="phone-o" />电话</div>
            <div><input  placeholder="请输您的电话" v-model="tel" @change="verify(verifyArr[0])" id="tel"  :pattern="verifyArr[0].reg"></div>
            <span class="error"></span>
        </div>
        <div class="cell">
            <div><van-icon name="envelop-o" />邮箱</div>
            <div><input type="email" placeholder="请输您的邮箱" v-model="email" @change="verify(verifyArr[1])" id="email" :pattern="verifyArr[1].reg"/></div>
            <span class="error"></span>
        </div>
        <div class="cell">
            <div><van-icon name="comment-o" />留言</div>
            <div>
                <textarea placeholder="请输您的留言内容" v-model="msg"></textarea>
            </div>
        </div>
        <div class="cell">
            <div><van-icon name="peer-pay" />验证码</div>
            <div class="codeInput"><input type="text" placeholder="请输验证码" v-model="code"/></div>
            <div class="code">
                <my-code @getIdentifyCode="getIdentifyCode"></my-code>
            </div>
        </div>

        <div class="btn" @click="submit">提交</div>
    </div>
    <bottom/>
    <contact/>
  </div>
</template>

<script>
import Code from '../components/code.vue'
import { Icon, Toast } from 'vant';
export default {
    name:'online',
    components:{
        'myCode':Code,
        'van-icon':Icon,
    },
    data(){
        return {
            name:'',
            tel:'',
            email:'',
            msg:'',
            code:'',
            identifyCode:'',
            verifyArr:[
                {
                    type:'tel',
                    index:0,
                    msg:'号码格式不正确!',
                    reg:'^1[3456789]\\d{9}$'
                },
                {
                    type:'email',
                    index:1,
                    msg:'邮箱格式不正确!',
                    reg:'^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$'
                }
            ],
            isVerifyArr:true,


        }
    },
    mounted() {
        console.log(this.verifyArr[0].reg);
        
    },
    methods:{
        getIdentifyCode(value){
            this.identifyCode = value
        },
        submit(){

            if(this.name == ''){
                Toast({message:'用户名不能为空!'})
                return
            }
        
            if(this.tel == ''){
                Toast({message:'电话不能为空!'})
                return
            }

            if(this.email == ''){
                Toast({message:'邮箱不能为空!'})
                return
            }

            if(this.msg == ''){
                Toast({message:'留言不能为空!'})
                return
            }

            if(this.code == ''){
                Toast({message:'验证码不能为空!'})
                return
            }
            if(this.identifyCode != this.code){
                Toast({message:'验证码错误!'})
                return
            }
            if(!this.isVerifyArr) return

            
        },
        //校验
        verify(obj){
            let domNode = document.getElementById(obj.type)
            let errs = document.getElementsByClassName('error')
            //添加错误提示
            errs[obj.index].innerHTML = domNode.validity.valid ? '' : obj.msg
            //错误有无修改
            this.isVerifyArr = domNode.validity.valid ? true : false
        }
    }
}
</script>

<style lang="scss" scoped>
.online_container{ 
    .cell{
        padding:10px 20px;
        > div:nth-child(1){
            padding-bottom: 20px;
            font-size: 20px;
        }
        input,textarea{
            padding:10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            color:#666;
            width: 84%;
        }
        textarea{
            height: 180px;
        }
        .codeInput,.code{
            display: inline-block;
            width: 100px;
        }
        .codeInput{
            vertical-align: top;
        }
    }
    .btn{
        width: 100px;
        line-height: 40px;
        padding: 5px 20px;
        color:white;
        background-color: #16accc;
        text-align: center;
        border-radius: 30px;
        margin: 10px auto 0;
        font-size: 24px;
    }
}
.error {
  width  : 100%;
  padding: 0;
  font-size: 80%;
  color: red;
  border-radius: 0 0 5px 5px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.error.active {
  padding: 0.3em;
}

</style>